<template>
  <view>
    <view class="class-box">
      <view class="class-title">课程介绍</view>
      <view class="class-detail">{{studyDescription}}</view>
    </view>
    
    <view class="video-box">
      <view class="class-title">课程列表</view>
      
      <view class="class-video-item" v-for="(item,index) in videoList" :key="index" @click.native="toWatchVideo(item.id)">
        <!-- 图片盒子 -->
        <view class="image-icon-box">
          <image class="image-icon" :src="bgImageSrc" mode="aspectFill"></image>
        </view>
        <!-- 标题盒子 -->
        <view class="class-item-title">{{item.title}}</view>
         <view class="finish-icon" v-if="item.isFinish===0">
           <image src="../../static/images/myTask5.png" 
           style="width: 50rpx;height: 50rpx"></image>
         </view>
         <view class="finish-icon"v-if="item.isFinish===1">
           <image src="../../static/images/mytask-2.png" 
           style="width: 50rpx;height: 50rpx"></image>
         </view>
      </view>
    </view>
    
    <view class="practice-box">
      <view class="practice-tip">提示:所有视频课程完成学习才可参与课程联系</view>
      <view class="practice-btn" v-if="allFinish" @click.native="toExam">单元练习</view>
      <view class="practice-btn" v-if="!allFinish" style="background-color: #a9e08f;">单元练习</view>
    </view>
  </view>
</template>

<script>
  export default {
    onLoad(option) {
      // 通过这个id查出所有属于这个id的题目.例:山地救援
      // console.log(option.id)
      this.subjectId=option.id
      
    },
    data() {
      return {
        // allFinish:false,
        //背景图片
        bgImageSrc: this.getimageBaseUrl("bgMsg.jpg"),
        subjectId:0,
        // 视频列表
        videoList:[],
		
		// 课程简介
		studyDescription:''
      };
    },
    mounted() {
      this.getVideoList()
	  this.getStudyDescription()
	  
    },
    methods:{
		// 获取课程简介和课程图片
		getStudyDescription(){
			uni.request({
			  url:`${this.$baseUrl}/learning/studyDescription/${this.subjectId}`,
			  method:"GET",
			  success:(res)=>{
			     // console.log(res.data)
			    if(res.data.status){
					this.studyDescription = res.data.data;
			          // this.studyDescription = res.data.data.description;
                  // this.bgImageSrc=res.data.data.imageSrc;
			    }            
			      // res.data.data=this.messageList           
			  },
			})
		},
		
      //根据科目获取视频集合
      async getVideoList(){
        const user = uni.getStorageSync("user");
        // console.log("查找类型"+this.subjectId)
        uni.request({
          url:`${this.$baseUrl}/learning/getAllVideo/${this.subjectId}/${user.openid}`,
          method:'GET',
          success: (res) => {
            // console.log(res)
            this.videoList=res.data.data
          }
        })
      },
      async toExam(){
        // console.log("要开始练题了",this.subjectId)
        uni.navigateTo({
          url:'/pages/examSubject/examSubject?id='+this.subjectId,
        })
      },
      async toWatchVideo(id){
        //这个id是某一段视频的id
        // console.log(id)
        uni.navigateTo({
          url:'/package_study/video/video?id='+id+"&cid="+this.subjectId,
        })
      },
    },
    computed:{
      allFinish:function(){
        // var flag=false;
        for(var i=0;i<this.videoList.length;i++){
          if(this.videoList[i].isFinish===0){
            return false;
          }
        }
        return true;
      },
    },
  }
</script>

<style lang="scss" scoped>
  .practice-box{
    height: 100rpx;
    width: 90%;
    // background-color: pink;
    margin: 10rpx auto;
    .practice-tip{
      font-size: 30rpx;
    }
    .practice-btn{
      height: 80rpx;
      background-color: #53c21d;
      border-radius: 10rpx;
      text-align: center;
      color: white;
      line-height: 80rpx;
      margin:20rpx auto;
      
    }
  }
  
  
  .video-box{
    // background-color: skyblue;
    // border: 1px solid green;
    width: 90%;
    margin: 50rpx auto;
    padding: 20rpx;
    .class-title{
      font-size: 40rpx;
    }
    .class-video-item{
      height: 180rpx;
      // border: 1px solid red;
      display: flex;
      margin: 30rpx auto;
      box-shadow: lightgray 0 0 5rpx 5rpx;
      position: relative;
      padding: 10rpx;
      .finish-icon{
      width: 50rpx;
      height: 50rpx;
      // background-color: #53c21d;
      position: absolute;
      top: 10rpx;
      right: 10rpx;
       
      }
      .image-icon-box{
        height: 100%;
        width: 30%;
        // border: 1px solid red;
        
        .image-icon{
          // width: 200rpx;
          width: 100%;
          height: 180rpx;
        }
      }
      .class-item-title{
        font-weight: bold;
        margin-left: 30rpx;
        height: 100%;
        line-height: 180rpx;
      }
    }
  }
  .class-box{
    // height: 180rpx;
    // background-color: pink;
    width: 90%;
    margin: 10rpx auto;
    padding: 20rpx;
    box-shadow: skyblue 10rpx 10rpx 0 0;
    .class-title{
      font-size: 40rpx;
    }
    .class-detail{
      font-size: 30rpx;
      text-indent: 2rem;
      color: grey;
    }
  }
</style>
